<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane :label="item.name" :name="item.id" v-for="item in tabList" :key="item.id"></el-tab-pane>
    </el-tabs>
    <div class="hearder-search">
      <div class="toplineBox mb-10">
        <div class="toplineBox-left">
          <el-input v-model="editForm.name" placeholder="填写工作名称" size="small" class="w-140 mr-10"></el-input>
          <!--周报表 月报表 年报表 近7天 30天 365天-->
          <!--去除时间到分-->
          <el-button type="primary" size="small" @click="searchFn"><i class="el-icon-search"></i>搜索</el-button>
          <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
          <el-button type="primary" size="small" @click="detailVisible=true" plain><i class="el-icon-plus"></i>发布例行工作
          </el-button>
          <el-button size="small" v-if="activeName=='1' || activeName=='3'" @click="userType=Number(activeName),historyVisible=true" plain>{{activeName=='1'?'例行工作':'抄送工作'}}历史记录
          </el-button>
          <el-button size="small" @click="userType=2,historyVisible=true" plain v-if="activeName=='2'">我的发布历史记录
          </el-button>
          <!--          <downexcel type="teskList"></downexcel>-->
        </div>
        <p class="numberline toplineBox-right">总{{ page.total }}条</p>
      </div>
    </div>
    <div class="table-body">
      <div class="table-body-box">
        <el-table
            ref="multipleTable"
            :data="arryList"
            :stripe="tableStyle.tableStripe"
            :border="tableStyle.tableBorder"
            tooltip-effect="dark"
            style="width: 100%"
            header-cell-class-name="table-text-c"
            cell-class-name="table-text-c">
          <el-table-column
              prop="id"
              label="ID"
              width="90"
          :key="1">
          </el-table-column>
          <el-table-column
              prop="name"
              label="例行工作名"
              :key="2">
          </el-table-column>
          <el-table-column
              label="发布人"
              width="100"
              :key="3">
            <template slot-scope="scope">
              {{ scope.row.admin ? scope.row.admin.realname : '--' }}
            </template>
          </el-table-column>
          <el-table-column
              label="工作类型"
              width="100"
              :key="4">
            <template slot-scope="scope">
              {{ workeType[scope.row.type] }}
            </template>
          </el-table-column>
          <el-table-column
              prop="create_time"
              label="发布时间"
              width="160"
              :key="5">
          </el-table-column>
          <!--顺序排序-->
          <el-table-column
              prop="end_time"
              label="任务状态"
              width="80"
              :key="6"
              v-if="activeName=='1' || activeName == '2'"
          >
            <template slot-scope="scope">
              <span v-if="activeName=='1'" :style="{color: scope.row.is_end?'#67C23A':'#ef6f14'}">{{ scope.row.is_end ? '已执行' : '未执行' }}</span>
              <span style="color: #ef6f14" v-else>执行中</span>
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              width="180"
              :key="7">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="workId=scope.row.id,workeDetailVisible=true" plain>工作详情
              </el-button>
              <!--              发布者总管理可删除-->
              <el-button type="danger" size="small" @click="handleDetel(scope.row.id)" plain v-if="activeName=='2'">
                删除
              </el-button>
            </template>t
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--工具条 分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.pagesize"
          @current-change="handleSizeChange">
      </el-pagination>
    </el-col>
    <workDetail :visible.sync="workeDetailVisible" :workId="workId" :acticveWorke="activeName"></workDetail>
    <addWorke :visible.sync="detailVisible"></addWorke>
    <historyList :visible.sync="historyVisible" :userType="userType"></historyList>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import workDetail from "./components/work-detail";
import addWorke from "./components/add-outine-worke";
import {mapGetters} from "vuex";
import {routineIndex, routineMy, noteDelete} from '@/api/admin/outineWorke'
import historyList from "./components/historyList";

export default {
  props: ['tabchildValue', 'tabValue'],
  components: {
    workDetail,
    addWorke,
    historyList
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    activeName() {
      this.arryList= []
      this.page.pageindex = 1
      this.InitFn()
    }
  },
  data() {
    return {
      userType: 1,
      historyVisible: false,
      activeName: '1',
      tabList: [
        {
          name: '我的例行工作',
          id: '1',
        },
        {
          name: '我的抄送',
          id: '3',
        },
        {
          name: '我的发布',
          id: '2'
        }
      ],
      workeType: {
        0: '不限',
        1: '学期',
        2: '月',
        3: '周',
        4: '日'
      },
      detailVisible: false,
      workeDetailVisible: false,
      arryList: [], // 页面数据列表
      // 搜索设置
      searchWord: '', // 搜索名称
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      editBox: null,
      clickStatus: null,
      workId: 0,
      editForm: {
        name: '',
        p: '',
      },
      userInfomation: null,
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    async InitFn() {
      console.log('用户信息：', this.userInfo)
      let option = this.getJson(this.editForm)
      option.p = this.page.pageindex
      // let data = await this.$post(this.api.task.archives.index, this.editForm);
      if (this.activeName === '1') {
        // 我的例行工作
        routineMy(option).then(res => {
          for (let item of res.list.data) {
            item.create_time = item.create_time.split(' ')[0]
          }
          this.arryList = res.list.data
          this.page.total = res.list.total
        })
      } else {
        // 我的抄送 我的发布
        option.style = this.activeName === '2'? 1 :3// 我的发布1  总揽 2 我的抄送 3
        routineIndex(option).then(res => {
          for (let item of res.list.data) {
            item.create_time = item.create_time.split(' ')[0]
          }
          this.arryList = res.list.data
          this.page.total = res.list.total
        })
      }
    },
    getJson(item){
      return JSON.parse(JSON.stringify(item))
    },
    searchFn() {
      this.page.pageindex = 1
      this.InitFn()
    }
    ,
// 编辑 执行情况
    handleEdit(id) {
      this.taskId = id
      this.dialogDrawerVisible = true
    }
    ,
// 任务详情 数据获取
    taskDetail(id) {
      this.taskId = id
      this.detailVisible = true
    },
// 刷新页面
    refreshFn() {
      this.page.pageindex = 1
      this.editForm.name = ''
      this.editForm.is_end = ''
      this.InitFn()
    },
// 设置默认选中
    checked(option) {
      if (option === 'first' && JSON.stringify(this.applyBookBox) !== '{}') {
        this.applyBookBox = {}
        this.$refs.table.clearSelection()
      }
      for (let i = 0; i < this.userList.length; i++) {
        if (this.applyBookBox[this.userList[i].id]) {
          this.$refs.table.toggleRowSelection(this.userList[i], true)
        }
      }
    }
    ,
// 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    }
    ,
// 刷新详情信息
    getUser() {
      this.taskDetail(this.editBox, 'refreshFn')
    }
    ,
// 弹窗
    checkTask() {

    }
    ,
    handleDetel(id) {
      this.$confirm('确认永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(id)
      }).catch(() => {
      })
    }
    ,
    detelRespon(id) {
      noteDelete({id:id}).then(res=>{
        if(!res.code){
          this.$message(res.msg)
          this.InitFn()
        }
      })
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.evaluateBox {
  background: #eee;
  margin-top: 5px;
  border-radius: 4px;
  padding: 5px;
}

.lookLsit {
  cursor: pointer;
}

.lookLsit:hover {
  text-decoration: underline;
}

#tablebox {
  display: flex;
  flex-direction: column;
}

.el-table {
  color: #000;
}

.right-box .container .main .content-container .input-val-box .input-top {
  width: 250px;
}

</style>
